<template>
  <div>
    <v-dialog
        v-model="dialog"
        width="50%"
        scrollable
    >
      <v-card>
        <v-card-title>
          <span class="text-h5">用户申诉</span>
        </v-card-title>
        <v-card-text>
          <v-textarea label="请填写申诉理由" v-model="reason"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="primary"
              @click="submitClaim"
          >
            提交
          </v-btn>
          <v-btn
              color="green darken-1"
              text
              @click="closeClaim"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-card>
      <v-img
          class="white--text align-end"
          src="@/assets/images/pages/card-basic-person.png"
          height="250"
      />
      <v-card-text class="position-relative">
        <!-- User Avatar -->
        <v-avatar
            size="100"
            color="white"
            class="avatar-center"
        >
          <v-img v-if="info.avatar !== ''" :src="info.avatar"></v-img>
          <v-img v-else src="@/assets/images/avatars/2.png"></v-img>
        </v-avatar>
        <!-- Title, Subtitle & Action Button -->
        <div class="d-flex justify-space-between flex-wrap pt-12">
          <div class="me-2 mb-2">
            <v-card-title class="pt-0 px-0">
              {{ name }}
            </v-card-title>
            <v-card-subtitle class="text-xs pa-0">
              {{ position }}
            </v-card-subtitle>
          </div>
          <div v-if="!isAuthor">
            <v-btn class="mt-3" color="primary" @click="changeFollow">
              {{ tempInfo.isFollowed ? '取消关注TA的动态' : '关注TA的科研动态' }}
            </v-btn>
            <v-btn v-if="info.isApplied" class="mt-3" color="primary" @click="sendText">
              向TA打个招呼
            </v-btn>
          </div>
        </div>

        <div v-if="!isAuthor" class="d-flex justify-space-between align-center mt-8">
              <span v-if="!info.isApplied" class="text--primary font-weight-medium">
                该学者未被认领，<a @click="toBind">点击申请认证绑定</a>
              </span>
          <span v-else class="text--primary font-weight-medium">
                该学者已被认领，如有任何疑问，<a @click="toClaim">点击申诉</a>
              </span>
        </div>
      </v-card-text>
    </v-card>
    <v-card class="mt-6">
<!--      <v-card-text>浏览量：105</v-card-text>-->
      <v-toolbar
          flat
      >
        <v-toolbar-title>
          <h4>个人信息</h4>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <div v-if="isAuthor">
          <v-btn
              v-if="isEditingInfo"
              fab
              small
              @click="edit(1, 'in')"
          >
            <v-icon>
              {{ icons.mdiClose }}
            </v-icon>
          </v-btn>
          <v-btn
              v-else
              fab
              small
              @click="edit(1, 'out')"
          >
            <v-icon>
              {{ icons.mdiPencil }}
            </v-icon>
          </v-btn>
        </div>
      </v-toolbar>
      <v-card-text v-if="!isEditingInfo">
        <v-list dense>
          <v-list-item v-if="tempInfo.position !== ''">
            <v-list-item-icon>
              <v-icon>{{icons.mdiBriefcase}}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ tempInfo.position }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-item v-if="tempInfo.org !== ''">
            <v-list-item-icon>
              <v-icon>{{icons.mdiBank}}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ tempInfo.org }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-item v-if="tempInfo.email !== ''">
            <v-list-item-icon>
              <v-icon>{{icons.mdiEmail}}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ tempInfo.email }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-item v-if="tempInfo.email === '' && tempInfo.position === '' && tempInfo.org === ''">
            <v-list-item-content>
              <v-list-item-title>No Data Available</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-card-text>
      <div v-else>
        <v-card-text>
          <v-form
              ref="form"
              v-model="valid"
              lazy-validation
          >
            <v-text-field :rules="[rules.required]" label="姓名" v-model="tempInfo.name"></v-text-field>
            <v-text-field :rules="[rules.required]" label="职位" v-model="tempInfo.position"></v-text-field>
            <v-text-field :rules="[rules.required]" label="所在机构" v-model="tempInfo.org"></v-text-field>
            <v-text-field :rules="[rules.email]" label="联系邮箱" v-model="tempInfo.email"></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              :disabled="!valid"
              color="primary"
              @click="save(1)"
          >
            提交
          </v-btn>
        </v-card-actions>
        <v-divider/>
      </div>

      <v-toolbar
          flat
      >
        <v-toolbar-title>
          <h5>工作经历</h5>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <div v-if="isAuthor">
          <v-btn
              v-if="isEditingWork"
              fab
              small
              @click="edit(2, 'in')"
          >
            <v-icon>
              {{ icons.mdiClose }}
            </v-icon>
          </v-btn>
          <v-btn
              v-else
              fab
              small
              @click="edit(2, 'out')"
          >
            <v-icon>
              {{ icons.mdiPencil }}
            </v-icon>
          </v-btn>
        </div>
      </v-toolbar>
      <v-card-text v-if="!isEditingWork">
        {{ tempInfo.work === '' ? '暂无' : tempInfo.work }}
      </v-card-text>
      <div v-else>
        <v-card-text>
          <v-textarea label="工作经历" v-model="tempInfo.work"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="primary"
              @click="save(2)"
          >
            提交
          </v-btn>
        </v-card-actions>
        <v-divider/>
      </div>

      <v-toolbar
          flat
      >
        <v-toolbar-title>
          <h5>教育背景</h5>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <div v-if="isAuthor">
          <v-btn
              v-if="isEditingEdu"
              fab
              small
              @click="edit(3, 'in')"
          >
            <v-icon>
              {{ icons.mdiClose }}
            </v-icon>
          </v-btn>
          <v-btn
              v-else
              fab
              small
              @click="edit(3, 'out')"
          >
            <v-icon>
              {{ icons.mdiPencil }}
            </v-icon>
          </v-btn>
        </div>
      </v-toolbar>
      <v-card-text v-if="!isEditingEdu">
        {{ tempInfo.edu === '' ? '暂无' : tempInfo.edu }}
      </v-card-text>
      <div v-else>
        <v-card-text>
          <v-textarea label="教育背景" v-model="tempInfo.edu"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="primary"
              @click="save(3)"
          >
            提交
          </v-btn>
        </v-card-actions>
        <v-divider/>
      </div>

      <v-toolbar
          flat
      >
        <v-toolbar-title>
          <h5>个人简介</h5>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <div v-if="isAuthor">
          <v-btn
              v-if="isEditingBio"
              fab
              small
              @click="edit(4, 'in')"
          >
            <v-icon>
              {{ icons.mdiClose }}
            </v-icon>
          </v-btn>
          <v-btn
              v-else
              fab
              small
              @click="edit(4, 'out')"
          >
            <v-icon>
              {{ icons.mdiPencil }}
            </v-icon>
          </v-btn>
        </div>
      </v-toolbar>
      <v-card-text v-if="!isEditingBio">
        {{ tempInfo.bio === '' ? '暂无' : tempInfo.bio }}
      </v-card-text>
      <div v-else>
        <v-card-text>
          <v-textarea label="个人简介" v-model="tempInfo.bio"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="primary"
              @click="save(4)"
          >
            提交
          </v-btn>
        </v-card-actions>
        <v-divider/>
      </div>
    </v-card>
  </div>
</template>

<script>
import {
  mdiPencil,
  mdiClose,
  mdiEmail,
  mdiBriefcase,
  mdiBank
} from '@mdi/js';
import axios from "axios";
import authorization from "../../api/authorization";
export default {
  name: "ProfileInfo",
  props: ['info', 'id'],
  data(){
    return {
      dialog: false,
      reason: '',
      isAuthor: JSON.parse(localStorage.getItem('userinfo')) === null ? false : JSON.parse(localStorage.getItem('userinfo')).profile.research_id === this.id,
      valid: true,
      isEditingInfo: false,
      isEditingWork: false,
      isEditingEdu: false,
      isEditingBio: false,
      tempInfo: JSON.parse(JSON.stringify(this.info)),
      // avatar: this.info.avatar,
      name: this.info.name,
      position: this.info.position,
      org: '',
      email: '',
      work: '',
      edu: '',
      bio: '',
      rules: {
        required: value => !!value || 'Required.',
        email: value => {
          // const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          const pattern = /^(.+@.+\..+)?$/
          return pattern.test(value) || 'Invalid e-mail.'
        },
      },
    }
  },
  methods: {
    toBind(){
      const that = this;
      authorization()
        .then(function (response){
          if(response[0]){
            that.$router.push({path: '/application/bind/' + that.id + '/'})
          }
          else{
            that.$notify.error({
              title: '尚未登录',
              message: '请先登录'
            })
          }
        })
    },
    toClaim(){
      const that = this;
      authorization()
          .then(function (response){
            if(response[0]){
              that.dialog = true
            }
            else{
              that.$notify.error({
                title: '尚未登录',
                message: '请先登录'
              })
            }
          })
    },
    submitClaim(){
      const that = this;
      axios
        .post('/api/apply/claim/', {
          reason: that.reason
        }, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("access"),
          }
        })
        .then(function (){
          that.dialog = false;
          that.reason = '';
          that.$notify.success({
            title: '提交申诉成功',
            message: '请等待管理员处理'
          })
        })
        .catch(function (error){
          that.$notify.error({
            title: '提交申诉失败',
            message: error.message
          })
        })
    },
    closeClaim(){
      this.dialog = false;
      this.reason = '';
    },
    changeFollow(){
      const that = this;
      authorization()
        .then(function (response){
          if(response[0]){
            if(that.tempInfo.isFollowed){
              that.$api.getScholar.unfollow(that.id)
                  .then(function (){
                    that.tempInfo.isFollowed = false;
                    that.$notify.success({
                      title: '取消关注成功',
                      message: '呜呜'
                    })
                  })
                  .catch(function (error){
                    that.$notify.error({
                      title: '取消关注失败',
                      message: error.message
                    })
                  })
            }
            else {
              that.$api.getScholar.follow(that.id)
                  .then(function (){
                    that.tempInfo.isFollowed = true;
                    that.$notify.success({
                      title: '关注成功',
                      message: '芜湖'
                    })
                  })
                  .catch(function (error){
                    that.$notify.error({
                      title: '关注失败',
                      message: error.message
                    })
                  })
            }
          }
          else{
            that.$notify.error({
              title: '尚未登录',
              message: '请先登录'
            })
          }
        })
    },
    edit(num, type){
      switch (num) {
        case 1:
          if(type === 'out'){
            this.name = this.tempInfo.name;
            this.position = this.tempInfo.position;
            this.org = this.tempInfo.org;
            this.email = this.tempInfo.email;
          }
          else{
            this.tempInfo.name = this.name;
            this.tempInfo.position = this.position;
            this.tempInfo.org = this.org;
            this.tempInfo.email = this.email;
          }
          this.isEditingInfo = !this.isEditingInfo; break;
        case 2:
          if(type === 'out'){
            this.work = this.tempInfo.work;
          }
          else{
            this.tempInfo.work = this.work;
          }
          this.isEditingWork = !this.isEditingWork; break;
        case 3:
          if(type === 'out'){
            this.edu = this.tempInfo.edu;
          }
          else{
            this.tempInfo.edu = this.edu;
          }
          this.isEditingEdu = !this.isEditingEdu; break;
        case 4:
          if(type === 'out'){
            this.bio = this.tempInfo.bio;
          }
          else{
            this.tempInfo.bio = this.bio;
          }
          this.isEditingBio = !this.isEditingBio; break;
      }
    },
    save(num){
      console.log(this.tempInfo);
      var data;
      const that = this.tempInfo;
      const t = this;
      switch (num) {
        case 1:
          data = {
            name: that.name,
            position: that.position,
            org: that.org,
            email: that.email
          }
          break;
        case 2:
          data = {
            work: that.work
          }
          break;
        case 3:
          data = {
            edu: that.edu
          }
          break;
        case 4:
          data = {
            bio: that.bio
          }
          break;
      }
      axios
        .patch('https://api.dreamhub.moyunbook.xyz/scholar/author/' + this.id + '/', data)
        .then(function (response){
          console.log(response)
          t.$notify.success({
            title: '更改成功',
            message: '芜湖'
          })
          t.name = that.name;
          t.position = that.position;
          switch (num) {
            case 1: t.isEditingInfo = false; break;
            case 2: t.isEditingWork = false; break;
            case 3: t.isEditingEdu = false; break;
            case 4: t.isEditingBio = false; break;
          }
        })
        .catch(function (error){
          t.$notify.error({
            title: '更改失败',
            message: error.message
          })
        })
    },
    sendText(){
      const that = this;
      authorization()
        .then(function (response){
          if(response[0]){
            console.log(that.info.user_id);
            axios
                .post(
                    '/api/message/',
                    {
                      receiver: that.info.user_id,
                      content: 'hello',
                    },
                    {
                      headers: {
                        Authorization: "Bearer " + localStorage.getItem("access"),
                      },
                    }
                )
                .then(function(){
                  that.$router.push({path: '/personal/chat'})
                })
                .catch(function (error){
                  that.$notify.error({
                    title: '发送失败',
                    message: error.message
                  })
                })
          }
          else{
            that.$notify.error({
              title: '尚未登录',
              message: '请先登录'
            })
          }
        })

    }
  },
  setup(){
    return {
      icons: {
        mdiClose,
        mdiPencil,
        mdiEmail,
        mdiBriefcase,
        mdiBank
      }
    }
  }
}
</script>

<style scoped>
.avatar-center {
  top: -4rem;
  left: 1rem;
  border: 3px solid white;
  position: absolute;
}
</style>